<template>
  <div class="content">
    <div class="top">
      <el-row :gutter="12">
        <el-col :span="6" v-for="(item,index) in panelList" :key="index">
          <el-card shadow="always" >  
            <!-- 父传子，自定义名字sendPanel把遍历好的panelList的元素都传过去 -->
            <con-panel :sendPanel="item"></con-panel>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="btm">
      <el-card class="box-card">
       <com-echarts :sendOption="echartsData"></com-echarts>
      </el-card>
    </div>
  </div>
</template>

<script>
import ComEcharts from '../../components/comEcharts';
import ConPanel from "../../components/conPanel";
import { api_query } from "../../api/home.js";

export default {
  components: {
    ConPanel,
    ComEcharts
  },
  data() {
    return {
      panelList:[
        {icon:"icon-dingdan1",count:10000,title:"总订单",color:"#0f95da"},
         {icon:"icon-dangrixiaoshoue",count:10000,title:"总销售额",color:"red"},
         {icon:"icon-dingdan",count:10000,title:"今日订单数",color:"#1afa29"},
         {icon:"icon-a-icon-xiaoshoue-fuben",count:10000,title:"今日销售额",color:"pink"}
      ],
      // 定义一个对象，对数据进行渲染后再传给子组件
    echartsData:{
      title:"数据统计",
      legend:['订单','销售统计'],
      xData:[],
      series:[]
    }

    };
  },
  mounted() {
    this.query();
  },

  methods: {
    async query() {
//       // rst返回数据:amountData: (7) [220, 282, 191, 234, 290, 330, 310]
// orderData: (7) [120, 132, 101, 134, 90, 230, 210]
// todayOrder: 189
// totalAmount: 202466
// totalOrder: 5486
// totayAmount: 2189
// xData: 
      let rst = await api_query();
      let{totalOrder,totalAmount,todayOrder,totayAmount,amountData,orderData,xData}=rst;
      [totalOrder,totalAmount,todayOrder,totayAmount].forEach((item,index)=>{
        this.panelList[index].count=item;
      })
      // this.panelList[0].count=rst.totalOrder;
  //  把rst解构出来的赋值给echartData
  this.echartsData.xData=xData;
   this.echartsData.series=[orderData,amountData].map((item,index)=>{
     return {
      //  index就是orderData,amountData，之后把订单给orderData
        name: ['订单','销售统计'][index],
      type: 'line',
      stack: 'Total',
      data: item
     }
   });
   console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#maychar {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
.box-card {
  margin-top: 20px;
}
</style>
